﻿@page
@{
    ViewBag.Title = "HouseShow";
    Layout = null;
}



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->



    <script src="~/libs/jquery/jquery.js"></script>
    <link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet">
    <script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>

</head>
<body>

    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-md2">
            <div class="layui-input-wrap">
                <input type="text" name="warehouseCode" value="" placeholder="请输入仓库编码" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-input-wrap">
                <input type="text" name="warehouseName" value="" placeholder="请输入仓库名称" class="layui-input" lay-affix="clear">
            </div>
        </div>

        <div class="layui-btn-container layui-col-xs12">
            <button class="layui-btn" id="btnSearch" lay-submit lay-filter="demo-table-search">搜索</button>
            <button type="button" class="layui-btn layui-btn-normal" onclick="add()">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>


    <table class="layui-hide" id="ID-table-demo-search" lay-filter="test">
    </table>

    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">
          <a class="layui-btn layui-btn-purple" lay-event="edit">修改</a>
          <a class="layui-btn layui-bg-red" lay-event="more">删除</a>
        </div>
    </script>

    <script>

        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;

            function GetShow() {
                // 创建渲染实例
                table.render({
                    elem: '#ID-table-demo-search',
                    url: '/api/app/qi/ware-house', // 此处为静态模拟数据，实际使用时需换成真实接口

                    cols: [[
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'WarehouseCode', width: 150, title: '仓库编号', },
                        { field: 'WarehouseName', width: 150, title: '仓库名称' },
                        { field: 'Location', width: 150, title: '仓库位置', },
                        { field: 'Area', width: 150, title: '仓库面积' },
                        { field: 'Charge', width: 150, title: '负责人' },
                        { field: 'Remark', width: 150, title: '备注', },
                        { field: 'writes', title: '操作', width: 200, toolbar: "#toolDemo" }
                    ]],
                    title: '仓库表',
                    page: true, //开启分页
                    //, toolbar: 'default' //开启头工具栏，此处显示默认图标，可以自定义模板，详见文档
                    limit: 3,
                    limits: [3, 6, 9, 12],
                });
                laydate.render({
                    elem: '.demo-table-search-date'
                });

            }


            GetShow();
            // 表单搜索
            form.on('submit(demo-table-search)', function (data) {
                // 表单提交
                table.reload('ID-table-demo-search', {
                    where: data.field,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                return false;
            });
            // 表单重置
            form.on('reset(demo-table-search)', function (data) {
                // 表单重置
                data.field.clientCode = "";
                data.field.clientName = "";
                table.reload('ID-table-demo-search', {
                    where: data.field,
                    page: { curr: 1 }
                });
                return false;
            });

            //监听 表行 工具栏事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'more') {
                    layer.confirm('真的删除行么', function () {
                        $.ajax({
                            url: '/QiData/DelWareHouse', // 替换为你的API URL
                            type: 'GET',
                            data: { id: obj.data.Id },
                            dataType: 'json',
                            success: function (res) {
                                if (res != null) {
                                    alert("删除成功");
                                    window.location.href = "/QiData/HouseShow/"
                                }
                            }
                        });
                    });

                } else if (layEvent === 'edit') {
                    localStorage.setItem("updatehouse", JSON.stringify(data));
                    layer.open({
                        type: 2, // page 层类型
                        area: ['80%', '80%'],
                        title: '修改仓库',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        maxmin: true, // 允许全屏最小化
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: '/QiData/HouseUpdate',//'<div style="padding: 32px;">一个普通的页面层，传入了自定义的 HTML</div>'
                        end: function () {
                            GetShow();//刷新父级页面列表方法，类似于回调函数
                        }
                    });
                }

            });

        });

    </script>

    @* 添加 *@
    <script>

        function add() {
            layer.open({
                type: 2,
                area: ['80%', '80%'],
                title: '添加仓库',
                shade: 0.6,
                shadeClose: true,
                maxmin: true,
                anim: 0,
                content: '/QiData/HouseAdd',
                end: function () {
                     window.location = '/QiData/HouseShow?' + new Date().getTime();
                }
            });
        }

    </script>



</body>

</html>

